<template>
  <el-dialog
    v-model="findPass"
    title="找回密码"
    :width="mobile === 'false' ? '80%' : 500"
    center
    @close="reset"
  >
    <div>
      <el-form
        label-position="right"
        label-width="auto"
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        :mode="ruleModel"
      >
        <el-form-item
          label="邮箱"
          :label-position="itemLabelPosition"
          prop="email"
        >
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item
          label="验证码"
          :label-position="itemLabelPosition"
          prop="code"
        >
          <div
            style="display: flex; justify-content: space-between; width: 100%"
          >
            <div>
              <el-input v-model="formData.code" placeholder="验证码" />
            </div>
            <div style="margin-left:10px">
              <el-button @click="getCode">{{ title }}</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="新密码"
          :label-position="itemLabelPosition"
          prop="pass"
        >
          <el-input
            v-model="formData.pass"
            placeholder="密码"
            minlength="6"
            maxlength="20"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from "vue";

const findPass = ref(false);
const title = ref("发送验证码");
const formData = ref({
  email: "",
  code: "",
  pass: "",
});
const mobile = localStorage.getItem("mobile");
const emits = defineEmits(["code", "submit"]);

const ruleForm = ref();
const rules = ref({
  email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
  code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
  pass: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
});
const ruleModel = ref({
  email: "",
  code: "",
  pass: "",
});

const open = () => {
  findPass.value = true;
};

const getCode = () => {
  emits("code", formData.value.email);
};

const onSubmit = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      emits("submit", formData.value);
      reset();
    }
  });
};

const reset = () => {
  formData.value = {
    email: "",
    code: "",
    pass: "",
  };
  findPass.value = false;
};

defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.el-form {
  width: auto;
}
</style>
